<template>
  <Cascader :data="tree" :load-data="loadData" :change-on-select="true" trigger="hover" @on-change="handleChange" v-model="value"></Cascader>
</template>

<script>
export default {
  data () {
    return {
      tree: [],
      value: []
    }
  },
  methods: {
    query (url, fn, efn) {
      this.$http({
        url
      })
        .then(result => {
          fn && fn(result)
        })
        .catch(error => {
          console.log(error)
          efn && efn(error)
        })
    },
    setTree (val) {
      /* this.query('/api/organizations/search/findByParentIdIsNull?projection=OrganizationWithSimple&sort=num&size=9999', (result) => {
        this.list = result._embedded.organizations
        this.tree = []
        for (let i = 0; i < this.list.length; i++) {
          if (!val || !val.id) {
            return
          }
          if (this.list[i].id !== val.id) {
            this.tree.push({
              value: this.list[i]._links,
              label: this.list[i].name,
              children: [],
              loading: false
            })
          }
        }
      }) */
      this.tree = []
      for (let i = 0; i < this.topList.length; i++) {
        if (!val || !val.id) {
          return
        }
        if (this.topList[i].id !== val.id) {
          const node = {
            value: this.topList[i]._links.self.href,
            label: this.topList[i].name
          }
          if (this.topList[i].childrenCount) {
            node.loading = false
            node.children = []
          }
          this.tree.push(node)
        }
      }
      console.log(this.tree)
    },
    loadData (item, callback) {
      item.loading = true
      this.query(`${item.value}/children?projection=OrganizationWithChildrenCount&sort=num`, (result) => {
        console.log(result._embedded)
        if (!item.children) {
          item.children = []
        }
        for (let i = 0; i < result._embedded.organizations.length; i++) {
          if (this.node && this.node.id && result._embedded.organizations[i].id !== this.node.id) {
            const node = {
              value: result._embedded.organizations[i]._links.self.href,
              label: result._embedded.organizations[i].name
            }
            if (result._embedded.organizations[i].childrenCount) {
              node.loading = false
              node.children = []
            }
            item.children.push(node)
          }
        }
        /* if (item.children && item.children.length === 0) {
          item.children = null
        } */
        item.loading = false
        callback()
      })
    },
    handleChange (value, selectedData) {
      console.log(value, this.value)
      this.setValue(value, selectedData)
    }
  },
  props: {
    node: {},
    setValue: {},
    topList: {},
    curParent: {}
  },
  watch: {
    /* node: {
      handler (val) {
        console.log(val)
        this.setTree(val)
      },
      deep: true
    } */
    node (val) {
      // console.log(val)
      this.setTree(val)
    }
  },
  created () {
    console.log('cascader created')
    // this.setTree()
  }
}
</script>

<style>
</style>
